<template>
  <div class="markdown-editor">
    <!-- 原始 Markdown 输入区 -->
    <div class="input-area">
      <h3>原始 Markdown</h3>
      <textarea 
        v-model="rawMd" 
        placeholder="输入 Markdown 内容..."
        rows="6"
      ></textarea>
      <button @click="renderMd">渲染</button>
    </div>

    <!-- 渲染预览区（支持选中文本添加标注） -->
    <div class="preview-area">
      <h3>预览（选中文字后点击添加标注）</h3>
      <button @click="addHighlight">添加高亮标注</button>
      <div 
        ref="previewRef" 
        class="markdown-preview"
        v-html="renderedHtml"
      ></div>
    </div>

    <!-- 带标注的 Markdown 输出 -->
    <div class="output-area">
      <h3>带标注的 Markdown</h3>
      <pre>{{ markedMd }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

// 原始 Markdown 内容
const rawMd = ref(`# 示例文档
这是一段可以选中的文本。
选中这句话，点击"添加高亮标注"试试。
`);

// 渲染后的 HTML
const renderedHtml = ref('');
// 预览区 DOM 引用
const previewRef = ref(null);
// 带标注的 Markdown
const markedMd = ref(rawMd.value);
// 标注记录（存储选中范围和类型）
const annotations = ref([]);

// 初始化渲染
const renderMd = () => {
  // 重置标注记录
  annotations.value = [];
  // 渲染 Markdown 为 HTML
  marked.setOptions({
    highlight: (code, lang) => {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(code, { language: lang }).value;
      }
      return hljs.highlightAuto(code).value;
    }
  });
  renderedHtml.value = marked.parse(rawMd.value);
  // 同步输出
  markedMd.value = rawMd.value;
};

// 初始化渲染
renderMd();

// 监听原始 Markdown 变化，自动重新渲染
watch(rawMd, renderMd);

// 添加高亮标注
const addHighlight = () => {
  // 获取选中的文本
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  const range = selection.getRangeAt(0);
  const selectedText = selection.toString().trim();
  if (!selectedText) return;

  // 1. 视觉标注：用 span 包裹选中区域
  const markEl = document.createElement('span');
  markEl.className = 'highlight-annotation';
  markEl.dataset.type = 'highlight';
  // 存储原始文本（用于反向转换）
  markEl.dataset.text = selectedText;
  range.surroundContents(markEl);

  // 2. 记录标注位置（在原始文本中的索引）
  const startIndex = rawMd.value.indexOf(selectedText);
  if (startIndex !== -1) {
    annotations.value.push({
      type: 'highlight',
      text: selectedText,
      start: startIndex,
      end: startIndex + selectedText.length
    });
    // 生成带标注的 Markdown
    generateMarkedMd();
  }
};

// 生成带标注的 Markdown
const generateMarkedMd = () => {
  let result = rawMd.value;
  // 按倒序处理标注（避免索引偏移）
  const sortedAnnotations = [...annotations.value].sort((a, b) => b.start - a.start);
  
  sortedAnnotations.forEach(anno => {
    if (anno.type === 'highlight') {
      // 用 == 包裹高亮内容
      const markedText = `==${anno.text}=="`;
      // 替换原始文本中的对应部分
      result = result.substring(0, anno.start) + 
               markedText + 
               result.substring(anno.end);
    }
  });
  
  markedMd.value = result;
};
</script>

<style scoped>
.markdown-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.input-area, .preview-area, .output-area {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.output-area {
  grid-column: 1 / 3;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

button {
  margin-top: 10px;
  padding: 6px 12px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.markdown-preview {
  margin-top: 10px;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  line-height: 1.6;
}

/* 高亮标注样式 */
.highlight-annotation {
  background-color: #fff3cd;
  padding: 0 2px;
  border-radius: 3px;
}

pre {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  overflow-x: auto;
}
</style>